<template>
	<Tooltip 
		class="tableTooltip" 
		:maxWidth="2*width" 
		:placement="placement"
		:triggle="triggle"
		:transfer="true">
		<span><slot v-if="slots().default"></slot></span>
	    <span class="text-ellipsis" :style="{'max-width':width+'px'}"> {{content}}</span>
	    <template slot="content" class="tooltipContent">
			<slot v-if="slots().content"></slot>
			<slot v-else-if="slots().default"></slot>
            <span v-else class="pre-wrap">{{content}}</span>
        </template>
    </Tooltip>
</template>
<script>
  export default {
    name: 'tableTooltip',
    props:['content','width','placement','triggle'],
    data(){
      return {
      	
      }
    },
    watch:{

    },
    filters:{
    	
    },
    computed:{
      
    },
    mounted(){
    	
    },
    beforeDestroy(){
    	
    },
    methods:{
      
    },
    destroyed() {
      
    }
  }
</script>

<style scoped>
	.tooltipContent{
		white-space: normal;
		word-break: break-all;
	}
	.showContent{
		/*max-width:200px;*/
		word-break: normal;
		white-space: nowrap;
    	overflow: hidden;
    	text-overflow: ellipsis;
	}
	@media screen and (min-width: 1701px) {
		.flex .showContent{
			max-width:400px;
		}
	}
	@media screen and (min-width: 1501px) and (max-width: 1700px) {
		.flex .showContent{
			max-width:300px;
		}
	}
	@media screen and (min-width: 1301px) and (max-width: 1500px) {
		.flex .showContent{
			max-width:200px;
		}
	}
	@media screen and (min-width:1200px) and (max-width: 1300px) {
		.flex .showContent{
			max-width:150px;
		}
	}
	@media screen and (max-width: 1199px) {
		.flex .showContent{
			max-width:100px;
		}
	}
</style>
